.container {
    width: 1226px;
    margin: 0 auto;
}

.login-box {
    /* width: 100%; */
    height: 40px;
    background: #333;
}

.login-boxone {
    height: 40px;
    margin: 0 auto;
}

.bars {
    margin: 0 .3em;
    color: #424242;
}

.login-two {
    height: 40px;
    text-align: center;
    float: left;
}

.login-boxone a {
    text-decoration: none;
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
    font-size: 12px;
}


/* 购物车 */

.login-three {
    width: 120px;
    float: right;
    background-color: #424242;
    text-align: center;
}

.button-3 {
    height: 40px;
}

.button-3>i {
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -4px;
}


/* 登录 */

.login-foun {
    float: right;
}


/* 二级导航栏 */


/* .search-box { 
     width: 1903px;
     height: 100px; 
     错误处：给版心设置宽高 版心设置好后 不用给总框设置宽高 自动铺满屏幕就行 */


/* }   */


/* 搜索框 */

.search-box .logo {
    float: left;
}

.image {
    float: left;
    width: 56px;
    height: 56px;
    margin-top: 22px;
}

.show-box {
    float: left;
    width: 607px;
    height: 100px;
    margin-left: 132px;
}

.texte-box {
    float: left;
}

.small {
    float: left;
    padding: 38px 10px 38px;
    color: #333;
    font-size: 16px;
}


/* 搜索框隐藏样式 */

.mi-box {
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 24;
    margin-top: 40px;
    width: 100%;
    height: 0;
    border-top: 1px solid #e0e0e0;
    background: #fff;
    /* height: 229px; */
    transition: height 2s;
    overflow: hidden;
    opacity: 0;
}

.mi-s {
    font-size: 12px;
}

.mi-as {
    position: relative;
    float: left;
    width: 180px;
    padding: 35px 12px 0;
    text-align: center;
}

.tu-pian {
    width: 160px;
    height: 110px;
    margin: 0 auto 16px;
    text-align: center;
    border-right: 1px solid #888;
}

.tu-pian-ss {
    border-right: none;
}

.tu-pian>img {
    width: 160px;
    height: 110px;
}

.qin-chun {
    margin: 0;
    line-height: 20px;
    color: #333;
}

.yuan-qi {
    margin: 0;
    line-height: 20px;
    color: #ff6700;
}

.small:hover .mi-box {
    /* display: block; */
    opacity: 1;
    height: 229px;
}


/* 二级导航搜索框 */

.form-box {
    float: right;
    margin: 24px 0;
}

.form-box>input {
    float: left;
    width: 188px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
}

.form-box button {
    float: left;
    border: 1px solid #e0e0e0;
    width: 52px;
    height: 52px;
    font-size: 24px;
}

.small:hover .mi-box {
    display: block;
}


/* 轮播图 */

.lunbotu {
    position: relative;
    /* 相对定位 */
}

.polygon {
    display: block;
    width: 234px;
    height: 460px;
    /* border: 1px solid rebeccapurple; */
    background: rgba(105, 101, 101, .6);
    position: absolute;
    /* 绝对定位 */
    top: 0;
    left: 0;
}

.isoutside {
    padding-top: 20px;
    padding-bottom: 20px;
}

.outside-box>a {
    display: block;
    width: 234px;
    height: 42px;
    font-size: 14px;
    padding-left: 30px;
    line-height: 42px;
    color: #fff;
}


/* 轮播图箭头 */

.container {
    width: 1226px;
}

.outside-box i {
    float: right;
    margin-right: 49px;
    font-size: 16px;
    line-height: 16px;
    color: #e0e0e0;
    line-height: 42px;
}

.outside-box:hover {
    background-color: #FF6A00;
}

.outside-box>a:hover {
    color: #fff;
}


/* 轮播图片 */

.img-box>img {
    width: 1226px;
    height: 460px;
}


/* 轮播图片左箭头 */

.left-arrow {
    background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat;
    background-position: -85px 0;
    position: absolute;
    top: 194px;
    left: 234px;
    width: 41px;
    height: 69px;
    /* background-color: brown; */
}

.right-arrow {
    background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat;
    background-position: -120px 0;
    position: absolute;
    top: 194px;
    right: 0;
    width: 41px;
    height: 69px;
    /* background-color: brown; */
}

.left-arrow:hover {
    background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat;
    background-position: 0 0;
}

.right-arrow:hover {
    background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat;
    background-position: -42px 0;
}


/* 小圆点   */


/* 需重写 */

.yuan {
    display: block;
    width: 87px;
    height: 6px;
    position: absolute;
    top: 97%;
    right: 35px;
    z-index: 1;
    margin-top: -35px;
}


/* 小圆点样式 */

.yuan a {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    margin: 0 4px;
    border: 2px solid #fff;
}

.yuan a:hover {
    border-color: hsla(0, 0%, 100%, .3);
}


/* 隐藏轮播图 */

.isoutside {
    position: relative;
}

.pictures {
    width: 992px;
    height: 460px;
    background-color: white;
    position: absolute;
    /* 绝对定位 与父框相对定位才可实行 子绝父相 */
    top: 0;
    left: 234px;
    display: none;
    z-index: 3;
    /* border: 1px solid red; */
    /* 隐藏图片 */
}

.outside-box:hover .pictures {
    display: block;
    /* 转换成块级元素 显示图片 */
}


/* 隐藏样式没做完 */

.pic-list {
    float: left;
    width: 248px;
    height: 458px;
    padding: 2px 0;
}

.pic-item {
    display: block;
    padding: 18px 20px;
}

.pic-item>img {
    float: left;
    margin-right: 12px;
}

.pic-item>p {
    height: 40px;
    line-height: 40px;
}


/* 小米导航服务 */

.box-sizing {
    width: 100%;
    margin-top: 14px;
}

.center-box {
    width: 234px;
    height: 170px;
    background-color: #5F5750;
    float: left;
    margin-right: 2px;
}

.box-1 {
    display: block;
    float: left;
    width: 76px;
    height: 82px;
    text-align: center;
    color: #CFCCCA;
}

.box-1:hover {
    color: #fff;
}

.box-2 {
    padding-top: 18px;
    /* 顶部外边距顶下去18px */
}

.box-1 img {
    display: block;
    height: 24px;
    width: 24px;
    margin: 0 auto 4px;
}

.box-1 span {
    font-size: 12px;
}

.box-3 img {
    width: 316px;
    height: 170px;
    display: block;
    float: left;
}

.right-picture .box-3 {
    float: left;
    margin-left: 14px;
    /* border: 1px solid #000; */
}

.right-picture .box-3 {
    transition: all 1s;
}

.right-picture .box-3:hover {
    box-shadow: 4px 4px 8px 2px #888;
    /* position: relative;
    bottom: 3px; */
}


/* 半背景颜色  公用样式 */

.layout-color {
    height: 6401px;
    background-color: #f5f5f5;
    padding: 22px 0 12px;
    margin: 22px auto;
}


/* 广告位 */

.advertising>img {
    width: 1226px;
    height: 120px;
}


/* HD样式 */

.hd {
    position: relative;
    margin-top: 22px;
}

.hd-1 {
    margin: 0;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
}

.hd-2>i {
    position: absolute;
    top: 19px;
    right: 0;
    font-size: 30px;
    line-height: 12px;
    padding-top: 4px;
    color: #b0b0b0;
}

.hd-3 {
    position: absolute;
    top: 0;
    right: 32px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.hd a:hover {
    color: #FF6A00;
}

.hd-2>i:hover {
    color: #FF6A00;
}


/* 手机板块 */

.phone-box {
    width: 1240px;
    height: 628px;
    background-color: #f5f5f5;
}

.Phone-picture {
    height: 614px;
    width: 234px;
    float: left;
    /* 浮动 */
    margin: 0 0 14px;
}

.small-box {
    /* display: block; */
    float: left;
    width: 234px;
    height: 300px;
    text-align: center;
    margin: 0 8px 14px;
    background-color: #fff;
}

.small-box img {
    width: 160px;
    height: 160px;
    padding: 20px 0;
}

h3 {
    /* display: inline-block; */
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin: 0 10px 2px;
}

.nav {
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    height: 18px;
    /* border: 1px solid red; */
}

.nav-1 {
    font-size: 14px;
    color: #ff6700;
    margin: 0 10px 14px;
    ;
}


/* 过渡 */

.Phone-picture {
    transition: all 1s;
}

.Phone-picture:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* 过渡 */

.small-box {
    transition: all 1s;
}

.small-box:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* HD01 */

.Style-box {
    position: relative;
    margin-top: 22px;
}

.zhineng-box {
    margin: 0;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
}

.chuandai {
    position: absolute;
    top: 19px;
    right: 0;
    font-size: 16px;
    line-height: 12px;
    padding-top: 4px;
    color: #424242;
}

.remen {
    position: absolute;
    top: 0;
    right: 65px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.chuandai a:hover {
    color: #FF6A00;
    border-bottom: 3px solid #FF6A00;
}

.remen a:hover {
    color: #FF6A00;
    border-bottom: 3px solid #FF6A00;
}


/* 手表模块 */


/* 跟手机模块用一个样式 */

.small-box-s {
    float: left;
    display: block;
    width: 234px;
    height: 143px;
    background-color: #fff;
    margin: 0 0 14px 8px;
    position: relative;
}

.small-box-s .title {
    position: absolute;
    top: 44px;
    left: 20px;
    font-size: 18px;
    font-weight: 400;
}

.small-box-s .title-s {
    position: absolute;
    top: 72px;
    left: 30px;
    font-size: 12px;
    color: #757575;
}

.small-box-s .iconfont {
    position: absolute;
    top: 40px;
    right: 35px;
    font-size: 56px;
    font-weight: 600;
    line-height: 56px;
    color: #ff6700;
}

.small-box-s {
    transition: all 1s;
}

.small-box-s:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* HD2 */

.remen-s {
    position: absolute;
    top: 0;
    right: 95px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}


/* 家电模块 */

.appliance-box {
    width: 1240px;
    height: 628px;
    background-color: #f5f5f5;
}

.appliance-picture {
    height: 614px;
    width: 234px;
    float: left;
    /* 浮动 */
    margin: 0 0 14px;
}

.picture-a {
    display: block;
    margin-top: 14px;
}

.home-box {
    /* display: block; */
    float: left;
    width: 234px;
    height: 300px;
    text-align: center;
    margin: 0 8px 14px;
    background-color: #fff;
}

.home-box img {
    width: 160px;
    height: 160px;
    padding: 20px 0;
}

.h3-s {
    /* display: inline-block; */
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin: 0 10px 2px;
}

.nav-s {
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    height: 18px;
    /* border: 1px solid red; */
}

.nav-ss {
    font-size: 14px;
    color: #ff6700;
    margin: 0 10px 14px;
    ;
}


/* 过渡 */

.appliance-picture {
    transition: all 1s;
}

.appliance-picture:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* 过渡 */

.home-box {
    transition: all 1s;
}

.home-box:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* 家电  电烤箱 */


/* .small-box-s {
    float: left;
    display: block;
    width: 234px;
    height: 143px;
    background-color: #fff;
    margin: 0 0 14px 8px;
    position: relative;
} */


/* .small-box-s .title {
    position: absolute;
    top: 44px;
    left: 20px;
    font-weight: 400;
} */

.small-box-s .title-as {
    font-size: 14px;
}


/* .small-box-s .title-s {
    position: absolute;
    top: 72px;
    left: 30px;
    font-size: 12px;
    color: #757575;
} */

.small-box-s .price {
    color: #ff6700;
}

.small-box-s .title-ss {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 40px;
    right: 35px;
    font-size: 56px;
    font-weight: 600;
    line-height: 56px;
    color: #ff6700;
}

.small-box-s .title-ss .title-img {
    width: 80px;
    height: 80px;
}


/* .small-box-s:hover {
    box-shadow: 4px 4px 8px 2px #888;
} */


/* HD3 */


/* 跟HD有公用样式 */

.remen-qin {
    position: absolute;
    top: 0;
    right: 65px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.kongjing {
    position: absolute;
    top: 0;
    right: 130px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.saodi {
    position: absolute;
    top: 0;
    right: 200px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.kongjing>a:hover {
    color: #FF6A00;
    border-bottom: 3px solid #FF6A00;
}

.saodi>a:hover {
    color: #FF6A00;
    border-bottom: 3px solid #FF6A00;
}


/* 生活电器 */


/* 跟家电公用样式 */

.small-box-s .title-ads {
    width: 86px;
    height: 37px;
}

.small-box-s .units {
    margin-top: 19px;
}


/* 第二广告位 */

.advertising-space {
    margin-top: 22px;
    margin-bottom: 22px;
}


/* HD4 */


/* 厨房电器模块 */


/* 跟生活电器公共样式 */


/* HD5 */


/* 跟HD有公共样式 */

.remen-lu {
    position: absolute;
    top: 0;
    right: 93px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.kongjing-men {
    position: absolute;
    top: 0;
    right: 171px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.saodi-xiao {
    position: absolute;
    top: 0;
    right: 235px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}


/* 智能家居模块 */


/* 同上公用样式 */


/* HD6 */

.kongjing-yun {
    position: absolute;
    top: 0;
    right: 191px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}

.saodi-ping {
    position: absolute;
    top: 0;
    right: 291px;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}


/* 运动出行模块 */


/* 同上公共样式 */


/* 第三广告位 同上样式 */


/* HD7 */


/* 日用百货模块 */


/* HD8 */


/* 底部视频模块 */

.video-box {
    text-align: center;
    height: 258px;
    width: 296px;
    display: block;
    float: left;
    /* 浮动 */
    margin: 0 0 14px 0px;
    padding-right: 14px;
    /* 因为浮动过后的块级元素之间是没有间隙的所以加上margin值 */
}

.video-box img {
    width: 296px;
    height: 180px;
}

.video-s {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    width: 268px;
    height: 21px;
    margin: 28px 14px 14px 6px;
    text-align: center;
}

.video-as {
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
    margin: -10px 14px;
}

.video-box-s {
    text-align: center;
    height: 258px;
    width: 296px;
    display: block;
    float: left;
    /* 浮动 */
}

.video-box-s .video-s {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    width: 268px;
    height: 21px;
    margin: 28px 14px 14px 6px;
    text-align: center;
}

.video-box:hover {
    box-shadow: 4px 4px 8px 2px #888;
}

.video-box-s:hover {
    box-shadow: 4px 4px 8px 2px #888;
}


/* 底部服务模块 */

.saas-box {
    height: 50px;
    border-bottom: 1px solid #e0e0e0;
}

.saas {
    float: left;
    width: 19.8%;
    height: 25px;
    border-right: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}

.saas i {
    margin-right: 6px;
    font-size: 24px;
    line-height: 24px;
    vertical-align: -4px
}

.saas-as {
    border-right: none;
}

.saas>a:hover {
    color: #FF6A00;
}


/*底部第二服务模块  */

.kernel-box {
    float: left;
    width: 160px;
    margin: 0;
}

.kernel-box dt {
    margin: -1px 0 26px;
    font-size: 14px;
    line-height: 1.25;
    color: #424242;
}

.kernel-box dd {
    margin: 10px 0 0;
    font-size: 12px;
}

.kernel {
    padding: 40px 0;
}

.kernel-box a:hover {
    color: #ff6700;
}


/* 右微博模块 */

.super-box {
    position: relative;
}

.twitter {
    position: absolute;
    top: 40px;
    right: 0;
    width: 251px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
    color: #616161;
}

.pre {
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
}

.pre-s {
    margin: 0 0 5px 0;
    font-size: 12px;
}

.twitter .pre-as {
    display: inline-block;
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    border: 1px solid #ff6700;
    color: #ff6700
}

.twitter .pre-as:hover {
    background-color: #ff6700;
    color: #fff;
}

.twitter-s {
    font-size: 12px;
    margin-top: 10px;
}

.twitter-s img {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    /* 图片跟文字居中 */
    margin-left: 6px;
    margin-top: -3px;
}


/* 底部信息 */

.bottom-text {
    padding: 30px 0;
    font-size: 12px;
    background-color: #fafafa;
}

.bottom-text .container {
    position: relative;
}

.bottom-text .btm-logo {
    width: 56px;
    height: 56px;
    margin-right: 20px;
    background: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png);
    background-size: 56px;
    position: absolute;
    left: 0;
    top: 0;
}

.bottom-text .info-text {
    padding-left: 77px;
    color: #b0b0b0;
}

.bottom-text .info-text .text-s a {
    color: #757575;
}

.bottom-text .info-text .text-s a:hover {
    color: #ff6700;
}

.bottom-text .info-text a {
    color: #b0b0b0;
}

.bottom-text .info-links {
    margin: 4xp 0 15px;
    padding-left: 77px;
}

.bottom-text .info-links img {
    height: 28px;
}

.xiaomi {
    margin: 30px auto 0;
    height: 19px;
    width: 100%;
    background: url(../img/slogan2020.png) no-repeat center 0;
}


/* 最右边导航栏 */

.sidebar {
    position: fixed;
    bottom: 70px;
    right: 0;
    z-index: 99;
}

.sidebar-s {
    position: relative;
    display: block;
    width: 82px;
    height: 90px;
    margin-top: -1px;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    text-align: center;
}

.qr-code {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    padding-top: 18px;
}

.code-s {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    /* -webkit-transition: opacity .3s; */
    transition: opacity .3s;
}

.code-as {
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    /* -webkit-transition: opacity .3s; */
    /* transition: opacity .3s */
}

.sidebar-asd {
    margin-top: 14px;
    /* border-top: 1px solid #f5f5f5; */
}

.result {
    font-size: 14px;
}

.sidebar-s:hover .code-as {
    display: block;
}

.sidebar-s:hover .result {
    color: #ff6700;
}


/* 隐藏二维码样式 */

.sparkling {
    position: absolute;
    left: -130px;
    top: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #f5f5f5;
    /* visibility: hidden; */
    transition: opacity 1s;
    opacity: 0;
}

.spar-s {
    display: block;
    width: 100px;
    height: 100px;
    margin: 6px auto;
}

.spar-as {
    display: block;
    width: 82px;
    margin: 14px auto 0;
    color: #757575;
    text-align: center;
}

.sidebar-box:hover .sparkling {
    /* visibility: visible */
    opacity: 1;
}